<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="top"
      label-width="80px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="文章编辑">
        <Editor
          ref="toastuiEditor"
          :initialValue="form.editorText"
          height="600px"
          :options="editorOptions"
        />
      </el-form-item>

      <el-form-item label="文章描述" prop="description">
        <el-input
          type="textarea"
          v-model="form.description"
          :rows="6"
        ></el-input>
      </el-form-item>

      <el-form-item prop="thumb">
        <template slot="label">
          文章封面 ——
          <el-button type="danger" size="mini" plain @click="form.thumb = ''"
            >移除</el-button
          >
        </template>
        <Upload v-model="form.thumb" />
      </el-form-item>

      <el-form-item label="文章分类" prop="select">
        <!-- elementUI有个不更新UI的问题 -->
        <el-select
          v-model="form.select"
          placeholder="请选择"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="item in blogType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交编辑</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn'
import { Editor } from '@toast-ui/vue-editor'
import Upload from '@/components/Upload'
import { getBlogType } from '@/api/blogType'
import { editBlog, getBlog } from '@/api/blog'
export default {
  components: {
    Editor,
    Upload
  },
  data() {
    return {
      form: {
        title: '',
        editorText: '',
        description: '',
        thumb: '',
        select: ''
      },
      rules: {
        title: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '文章描述不能为空', trigger: 'blur' }
        ],
        select: [{ required: true, message: '请选择文章分类', trigger: 'blur' }]
      },
      blogType: [],
      editorOptions: {
        language: 'zh-CN'
      }
    }
  },

  async created() {
    const resp = await getBlogType()
    this.blogType = resp.data
    const { data } = await getBlog(this.$route.params.id)
    this.form = data
    this.form.select = data.category === null ? '' : data.category.id
    this.$refs.toastuiEditor.invoke('setHTML', data.htmlContent)
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const html = this.$refs.toastuiEditor.invoke('getHTML')
          const markdown = this.$refs.toastuiEditor.invoke('getMarkdown')
          const params = {
            title: this.form.title,
            description: this.form.description,
            createDate: new Date().getTime(),
            categoryId: this.form.select,
            toc: [], // toc由后端生成
            thumb: this.form.thumb,
            htmlContent: html,
            markdownContent: markdown
          }
          if (markdown) {
            await editBlog(this.$route.params.id, params)
            this.$message.success('编辑成功')
            this.$router.push('/blog/blog-list')
          } else {
            this.$message.error('请填写文章内容')
          }
        }
      })
    }
  }
}
</script>
